<template>
  <canvas ref="uiCanvasRef" class="ui-canvas"></canvas>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { loadImage } from "@/utils";
import { ClockUI } from "@/ui/ClockUI";
import { EnergyBarUI } from "@/ui/EnergyBarUI";
import { InventoryUI } from "@/ui/InventoryUI";
import { HotBarUI } from "@/ui/HotbarUI";
import { useUIStore } from "@/store/uiStore";
import { useTimeStore } from "@/store/timeStore";
import Curosrs from "@/assets/images/tiles/cursors.zh-CN.png";
import type { render } from "vue";

const uiStore = useUIStore();
const timeStore = useTimeStore();
let clockUI: ClockUI | null = null;
let energyBarUI: EnergyBarUI | null = null;
let inventoryUI: InventoryUI | null = null;
let hotbarUi: HotBarUI | null = null;
let ctx: CanvasRenderingContext2D | null = null;
const resources: Record<string, HTMLImageElement> = {}; // 存储资源
const uiCanvasRef = ref<HTMLCanvasElement | null>(null);

// 加载UI资源
const loadResources = async () => {
  try {
    resources.cursors = await loadImage(Curosrs);
  } catch (error) {
    console.error("加载UI资源失败：", error);
  }
};

// 渲染所有UI元素
const renderUI = () => {
  if (!ctx || !uiCanvasRef.value) return;

  ctx.clearRect(0, 0, uiCanvasRef.value.width, uiCanvasRef.value.height);

  // 确保像素渲染清晰
  ctx.imageSmoothingEnabled = false;

  if (clockUI) {
    clockUI.render(ctx, uiCanvasRef.value);
  }

  if (energyBarUI) {
    energyBarUI.render(ctx, uiCanvasRef.value);
  }

  if (inventoryUI) {
    inventoryUI.render(ctx, uiCanvasRef.value);
  }

  if (hotbarUi) {
    hotbarUi.render(ctx);
  }
};

// 动画循环
let lastTime = 0;
let animationFrameId: number | null = null;
const animate = (timestamp: number) => {
  const deltaTime = timestamp - lastTime;
  lastTime = timestamp;

  // 更新游戏时间
  timeStore.updateGameTime();

  // 更新时钟UI
  if (clockUI) {
    clockUI.update();
  }

  if (energyBarUI) {
    energyBarUI.update();
  }

  renderUI();

  animationFrameId = requestAnimationFrame(animate);
};

const handleResize = () => {
  if (uiCanvasRef.value) {
    uiCanvasRef.value.width = window.innerWidth;
    uiCanvasRef.value.height = window.innerHeight;
  }
};

onMounted(async () => {
  if (uiCanvasRef.value) {
    uiCanvasRef.value.width = window.innerWidth;
    uiCanvasRef.value.height = window.innerHeight;

    ctx = uiCanvasRef.value.getContext("2d");
    if (ctx) {
      // 设置像素渲染模式
      ctx.imageSmoothingEnabled = false;
    }
  }

  window.addEventListener("resize", handleResize);

  await loadResources();

  // 创建时钟UI实例
  clockUI = new ClockUI();

  // 能量条UI实例
  energyBarUI = new EnergyBarUI();

  // 背包UI
  inventoryUI = new InventoryUI();

  // 快捷栏UI
  hotbarUi = new HotBarUI();

  lastTime = performance.now();
  animationFrameId = requestAnimationFrame(animate);

  window.addEventListener("keydown", (e) => {
    if (e.key === "e" || e.key === "E" || e.key === "Escape") {
      inventoryUI?.toggle();
      hotbarUi?.toggle();
    }

    if (hotbarUi) {
      hotbarUi.handleKeyDown(e);
    }
  });

  // 鼠标按下事件
  window.addEventListener("mousedown", (e) => {
    if (inventoryUI) {
      inventoryUI.handleMouseDown(e.clientX, e.clientY);
    }

    const hotbarElement = uiStore.uiElements["hotbar"];

    if (hotbarUi && hotbarElement && hotbarElement.visible) {
      hotbarUi.handleMouseDown(e);
    }
  });

  // 鼠标移动事件
  window.addEventListener("mousemove", (e) => {
    if (inventoryUI) {
      inventoryUI.handleMouseMove(e.clientX, e.clientY);
    }

    if (hotbarUi) {
      hotbarUi.handleMouseMove(e);
    }
  });

  // 鼠标松开事件
  window.addEventListener("mouseup", (e) => {
    if (inventoryUI) {
      inventoryUI.handleClick(e.clientX, e.clientY);
    }

    if (hotbarUi) {
      hotbarUi.handleMouseUp(e);
    }
  });
});
</script>

<style lang="scss" scoped>
.ui-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 允许点击穿透到下层 */
  z-index: 1000;
}
</style>
